<template>
  <view class="container">
    <view class="info">
      <!-- 微信端 -->
      <!-- #ifdef MP-WEIXIN -->
      <view class="left">
        <view class="nickname" v-if="JSON.stringify(LoginAdmin) !== '{}'">
          {{ LoginAdmin.nickname }}
        </view>
        <open-data v-else type="userNickName" class="nickname"></open-data>
      </view>
      <view class="right">
        <view class="avatar xcx">
          <u-avatar
            :src="LoginAdmin.avatar_cdn"
            size="90"
            v-if="JSON.stringify(LoginAdmin) !== '{}'"
          ></u-avatar>
          <open-data type="userAvatarUrl" v-else></open-data>
        </view>
      </view>
      <!-- #endif -->

      <!-- H5和APP端 -->
      <!--  #ifdef H5 || APP-PLUS -->
      <view class="left">
        <view class="nickname" v-if="JSON.stringify(LoginAdmin) != '{}'">
          {{ LoginAdmin.nickname }}
        </view>
        <view class="nickname" v-else> 请选登陆 </view>
        <view class="email" v-if="JSON.stringify(LoginAdmin) != '{}'">
          {{ LoginAdmin.email }}
        </view>
      </view>
      <view class="right">
        <view class="avatar">
          <u-avatar
            :src="LoginAdmin.avatar_text"
            size="90"
            v-if="JSON.stringify(LoginAdmin) != '{}'"
          ></u-avatar>
          <u-avatar src="/static/avatar.jpg" size="90" v-else></u-avatar>
        </view>
      </view>
      <!-- #endif -->
    </view>

    <!-- 标签栏 -->
    <view class="banner-warpper">
      <view class="banner">
        <view class="left">
          <view class="group" v-if="JSON.stringify(LoginAdmin) !== '{}'">
            {{ LoginAdmin.group_text }}
          </view>
          <view class="group" v-else> 暂无角色组 </view>
          <view class="join">
            加入时间：{{
              JSON.stringify(LoginAdmin) != "{}"
                ? $u.timeFormat(
                    LoginAdmin.createtime,
                    "yyyy年mm月dd日 hh时MM分"
                  )
                : "无"
            }}
          </view>
        </view>
        <view class="right">
          <!-- #ifdef MP-WEIXIN -->
          <u-button
            :customStyle="btnStyle"
            size="small"
            icon="chat"
            shape="circle"
            openType="feedback"
            >问题反馈
          </u-button>
          <!-- #endif -->
          <!--  #ifdef H5 || APP-PLUS -->
          <u-button
            :customStyle="btnStyle"
            size="small"
            icon="chat"
            shape="circle"
            @click="feedback"
            >问题反馈
          </u-button>
          <!-- #endif -->
        </view>
      </view>
    </view>

    <!-- 宫格布局 -->
    <view class="grid1" v-if="JSON.stringify(LoginAdmin) !== '{}'">
      <u-grid :border="false" col="4" @click="changOperation">
        <u-grid-item
          v-for="(listItem, listIndex) in list"
          :key="listIndex"
          :name="listItem.name"
        >
          <u-icon
            :customStyle="{ paddingTop: 20 + 'rpx' }"
            :name="listItem.name"
            color="#19BC9C"
            :size="29"
          >
          </u-icon>
          <text class="grid-text">{{ listItem.title }}</text>
        </u-grid-item>
      </u-grid>
    </view>

    <!-- 消息提醒 -->
    <view class="actions">
      <!-- #ifdef MP-WEIXIN -->
      <view class="contact" v-if="JSON.stringify(LoginAdmin) !== '{}'">
        <u-button icon="chat" openType="contact">联系助手 </u-button>
      </view>
      <view class="contact" v-else>
        <u-button icon="chat">联系助手 </u-button>
      </view>
      <view class="logout" v-if="JSON.stringify(LoginAdmin) !== '{}'">
        <u-button type="error" text="注销登陆" @click="logout"></u-button>
      </view>
      <view class="logout" v-else>
        <u-button type="primary" icon="weixin-circle-fill" @click="onWxLogin"
          >微信一键登陆</u-button
        >
      </view>
      <!-- #endif -->
      <!--  #ifdef H5 || APP-PLUS -->
      <view class="contact">
        <u-button icon="chat" @click="feedback">联系助手 </u-button>
      </view>
      <view class="logout" v-if="JSON.stringify(LoginAdmin) !== '{}'">
        <u-button type="error" text="注销登陆" @click="logout"></u-button>
      </view>
      <view class="logout" v-else>
        <u-button type="primary" @click="toLogin">登陆帐号</u-button>
      </view>
      <!-- #endif -->
    </view>

    <!-- 引用uView 信息提示 -->
    <u-toast ref="uToast"></u-toast>
    <u-modal
      :show="show"
      :content="content"
      :title="title"
      :showCancelButton="true"
      @confirm="confirm"
      @cancel="show = false"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      LoginAdmin: {},
      list: [
        {
          name: "coupon-fill",
          title: "修改资料",
        },
        {
          name: "checkmark-circle-fill",
          title: "微信解绑",
        },
        {
          name: "man-add-fill",
          title: "领取记录",
        },
        {
          name: "photo-fill",
          title: "回访记录",
        },
      ],
      btnStyle: {
        width: "180rpx",
      },
      show: false,
      content: "确认是否注销登陆？",
      action: "",
      title: "",
    };
  },
  onShow() {
    this.LoginAdmin = uni.getStorageSync("LoginAdmin")
      ? uni.getStorageSync("LoginAdmin")
      : {};
  },
  methods: {
    onWxLogin() {
      uni.login({
        provider: "weixin",
        success: async (res) => {
          // 获取登录凭证
          let code = res.code;

          // 登录凭证是空的会提示
          if (!code) {
            this.$refs.uToast.show({
              type: "error",
              message: "获取登录凭证失败",
            });

            return false;
          }

          let result = await this.$u.api.admin.WxLogin({ code });

          if (result.code === 0) {
            if (result.data.bind === "bind") {
              this.$refs.uToast.show({
                type: "error",
                message: result.msg,
                complete: () => {
                  this.$u.route("/pages/admin/bind/bind", {
                    openid: result.data.openid,
                  });
                },
              });
            } else {
              this.$refs.uToast.show({
                type: "error",
                message: result.msg,
              });
            }

            return false;
          } else {
            this.$refs.uToast.show({
              type: "success",
              message: result.msg,
              duration: 1500,
              complete: () => {
                uni.setStorageSync("LoginAdmin", result.data);

                this.LoginAdmin = result.data;
              },
            });
          }
        },
      });
    },
    toLogin() {
      this.$u.route("/pages/admin/login/login");
    },
    changOperation(value) {
      switch (value) {
        case "coupon-fill":
          this.$u.route("/pages/admin/profile/profile");
          break;

        case "checkmark-circle-fill":
          (this.action = value), (this.title = "微信解绑");
          this.content = "解除绑定后，将无法使用「微信一键登录」";
          this.show = true;
          break;

        case "man-add-fill":
          this.$u.route("/pages/manage/receive/index/index");
          break;

        case "photo-fill":
          this.$u.route("/pages/manage/visit/index/index");
          break;
      }
      // if (value === "checkmark-circle-fill") {
      //   (this.action = value), (this.title = "微信解绑");
      //   this.content = "解除绑定后，将无法使用「微信一键登录」";
      //   this.show = true;
      // } else if (value === "coupon-fill") {
      //   this.$u.route("/pages/admin/profile/profile");
      // }
    },
    async confirm() {
      // 微信解绑 退出登录
      if (this.action === "checkmark-circle-fill") {
        let data = {
          adminid: this.LoginAdmin.id,
        };

        let result = await this.$u.api.admin.unbinding(data);

        this.show = false;

        if (result.code === 1) {
          this.$refs.uToast.show({
            type: "success",
            message: result.msg,
            duration: 1500,
            // #ifdef MP-WEIXIN
            complete: () => {
              this.LoginAdmin = {};
            },
            // #endif
          });
        } else {
          this.$refs.uToast.show({
            type: "error",
            message: result.msg,
            duration: 1500,
          });
        }
      } else if (this.action === "logout") {
        this.show = false;

        this.$refs.uToast.show({
          type: "success",
          message: "注销登陆成功",
          duration: 1500,
          complete: () => {
            uni.removeStorageSync("LoginAdmin");

            this.LoginAdmin = {};
          },
        });
      }
    },
    logout() {
      this.show = true;
      this.title = "注销登陆";
      this.content = "确认是否注销登陆？";
      this.action = "logout";
    },
  },
};
</script>

<style>
page {
  background-color: #fff;
}

.container {
  margin: 0;
}

.info {
  display: flex;
  padding: 40rpx;
  background-color: #f5f5f5;
}

.info .left {
  flex: 3;
}

/* #ifdef MP-WEIXIN  */
.info .left {
  flex: 3;
  display: flex;
  align-items: center;
  align-content: center;
}

/* #endif    */

.info .right {
  flex: 1;
}

.info .right .xcx {
  width: 200rpx;
  height: 200rpx;
  border-radius: 100%;
  overflow: hidden;
}

.info .left .nickname {
  font-size: 26px;
  font-weight: bold;
}

.info .left .email {
  font-size: 12px;
  color: gray;
}

.banner-warpper {
  background-color: #f5f5f5;
}

.banner {
  width: auto;
  margin: 0 40rpx;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  height: 60px;
  background: rgb(34, 52, 70);
  background: linear-gradient(
    133deg,
    rgba(34, 52, 70, 1) 35%,
    rgba(44, 62, 80, 1) 100%
  );
  box-shadow: 0 10px 10px var(--color-dark);
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner .left {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.banner .right {
  flex: 2;
  display: flex;
  justify-content: center;
}

.banner .left .group {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.banner .left .join {
  color: #aaa;
  font-size: 10px;
  padding-top: 4px;
}

.grid1 {
  padding: 20px 40rpx;
  background-color: #fff;
}

.grid1 .van-grid-item {
  color: var(--color-primary);
}

.grid2 {
  padding: 0 40rpx;
  background-color: #fff;
}

.grid2 .title {
  font-size: 16px;
  font-weight: bold;
  padding: 0 10rpx 10px;
}

.actions {
  display: flex;
  padding: 20px 40rpx;
}

.contact {
  flex: 1;
  padding-right: 4px;
}

.logout {
  flex: 1;
  padding-left: 4px;
}

.btn-vertical {
  background-color: rgb(0, 0, 0, 0) !important;
  border: 0 !important;
  width: 100%;
  height: 100% !important;
  padding: 15px !important;
}

.btn-vertical.van-button--active:before {
  opacity: 1;
  background-color: rgb(0, 0, 0, 0) !important;
}

.btn-vertical__icon {
  font-size: 26px;
  align-items: center;
  justify-content: center;
}

.btn-vertical__text {
  margin-top: 6px;
  word-wrap: break-word;
  color: var(--grid-item-text-color, #646566);
  font-size: var(--grid-item-text-font-size, 12px);
}
</style>